<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" placeholder="名称" v-model="params.name" style="width: 130px;" clearable></el-input>
      <el-input class="filter-item" placeholder="账号" v-model="params.accountNo" style="width: 130px;" clearable></el-input>
      <el-select class="filter-item" v-model="params.status" filterable placeholder="商户状态" style="width: 120px;" clearable>
        <el-option :value="10" label="启用"></el-option>
        <el-option :value="20" label="关闭"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-edit-outline" @click="getUserList(1)">搜索</el-button>
      <el-button v-if="btnPower.StaffListAdd" class="filter-item" type="primary" icon="el-icon-plus" @click="getButton()">添加</el-button>
    </div>
    <el-table
      :data="usersList"
      v-loading="listLoading"
      element-loading-text="请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="accountNo"
        label="账号名"
        align="center">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号"
        align="center">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="80"
        :formatter="statusType"
        align="center">
      </el-table-column>
      <el-table-column
        prop="modAt"
        label="修改时间"
        :formatter="timeFormat"
        width="160"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createAt"
        label="创建时间"
        :formatter="timeFormat"
        width="160"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        width="230"
        align="center"
        fixed="right">
        <template slot-scope="scope">
          <el-button v-if="btnPower.StaffListRev" type="text" icon="el-icon-edit" class="el-link" size="small" @click="getButton(scope.row)">修改</el-button>
          <el-button v-if="btnPower.StaffListRole" type="text" icon="el-icon-finished" class="el-link el-link--success" size="small" @click="getRoleButton(scope.row)">角色</el-button>
          <el-button v-if="btnPower.StaffListDel"  type="text" icon="el-icon-delete" class="el-link el-link--danger" size="small" @click="getDelUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getUserList" />
    <el-dialog
      :title="popupType==1?'添加用户':'修改用户'"
      :visible.sync="popup"
      :close-on-click-modal=false
      :destroy-on-close=true
      width="500px"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="账号名" prop="accountNo" v-if="popupType==1">
          <el-input v-model="ruleForm.accountNo" placeholder="请输入账号名"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="ruleForm.status" filterable>
            <el-option label="启用" :value="10"></el-option>
            <el-option label="停用" :value="20"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="pwd" v-if="popupType==2">
          <el-button type="primary" @click="resetPwd">重置密码</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :title="'编辑('+roleForm.name+')角色'"
      :visible.sync="rolePopup"
      :close-on-click-modal=false
      :destroy-on-close=true
      width="500px"
      center>
      <el-form :model="roleForm" ref="roleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色" prop="roles">
          <el-select v-model="roleForm.roles" multiple placeholder="请选择">
            <el-option
              v-for="item in distRoleList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rolePopup = false">取 消</el-button>
        <el-button type="primary" @click="getRoleForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { userList, addRevUser, delUser, restUser, distRole, addDistRole } from '@/api/api.verify.js'

export default {
  components:{Pagination},
  name: 'StaffList',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      listLoading:true,
      popupType:1,// 1添加  2编辑
      popup:false,//弹窗隐藏状态
      usersList:[],//用户列表
      total:0,//总条数
      params:{
        current: 1,
        size: 10,
        name:null,
        accountNo:null,
        status:10,
      },//查询条件
      ruleForm:{
        name:null,
        accountNo:null,
        mobile:null,
        status:10,
        type:20,
      },//表单内容
      rules:{
        name: [
          {required: true, message: '请输入名称', trigger: 'blur'},
        ],
        accountNo: [
          {required: true, message: '请输入账号', trigger: 'blur'},
        ],
        mobile: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          { max: 11, message: '请输入正确手机号', trigger: 'blur' },
          { pattern: /1[0-9][0-9]{9}/, message: '请输入正确手机号' }
        ],
      },
      rolePopup:false,//角色弹窗
      distRoleList:[],//用户角色信息列表
      roleForm:{//角色信息表单
        userId:null,
        name:null,
        roles:[],
      },
    }
  },
  created() {
    this.getStart();
  },
  methods: {
    getStart(){//初始化
      this.getUserList()
    },
    getUserList(e){//获取用户列表
      if(e==1){ this.params.current=1}
      let _this=this
      let data=this.params
      this.listLoading=true
      userList(data).then(d=>{
        _this.usersList=d.data.records
        _this.total=d.data.total
      }).finally(d=>{
        _this.listLoading=false
      });
    },
    getButton(e){//点击添加编辑
      if (e) {//修改
        this.popupType=2
        this.ruleForm.id=e.id
        this.ruleForm.name=e.name
        this.ruleForm.accountNo=null
        this.ruleForm.mobile=e.mobile
        this.ruleForm.status=e.status
      }else{//添加
        this.popupType=1
        this.ruleForm.name=null
        this.ruleForm.accountNo=null
        this.ruleForm.mobile=null
        this.ruleForm.status=10
      }
      this.popup=true
    },
    submitForm(formName) {//表单验证
      let _this = this;
      this.$refs[formName].validate((valid) => {
        if(valid) {
          _this.getForm()
        } else {
          return false;
        }
      });
    },
    getForm(){//提交表单
      let _this=this
      let data=_this.ruleForm
      let method = "POST"
      let alerts = "添加"
      if(this.popupType==2){
        method = "PUT"
        alerts = "修改"
      }
      addRevUser(data,method).then(d=>{
        _this.$message({
          type: 'success',
          message: alerts+'成功!'
        });
        _this.popup=false
        _this.getUserList(1)
      });
    },
    getDelUser(e){//删除用户
      let _this=this;
      this.$confirm('是否删除（'+e.name+'）用户','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        let data={}
        data.id=e.id;
        delUser(data).then(d=>{
          _this.$message({
            type: 'success',
            message: '删除成功!'
          });
          _this.getStart()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    resetPwd(){
      let _this=this
      this.$confirm('是否重置 '+_this.ruleForm.name+' 密码','提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
          let data={}
          data.id=_this.ruleForm.id;
          restUser(data).then(d=>{
            _this.$message({
                type: 'success',
                message: '重置成功!'
            });
            _this.getUserList();
          });
      }).catch(() => {
          this.$message({
          type: 'info',
          message: '已取消'+title
          });
      });
    },
    getRoleButton(e){//点击角色按钮
      this.rolePopup=true
      this.roleForm.userId=e.id
      this.roleForm.name=e.name
      let _this=this
      let data={}
      data.userId=e.id
      distRole(data).then(d=>{
        _this.distRoleList=d.data
        let roles=[]
        for (let i=0; i<d.data.length; i++){
          if(d.data[i].selected==10){
              roles.push(d.data[i].id);
            };
        }
        _this.roleForm.roles=roles
      })
    },
    getRoleForm(){//提交用户角色
      let _this=this
      let data=this.roleForm
      addDistRole(data).then(d=>{
        _this.$message({
          type: 'success',
          message: '编辑成功!'
        });
        _this.rolePopup=false
      })
    },

    timeFormat(row, column, cellValue, index) {
      return this.common.getLocalTime(parseInt(cellValue) * 1000);
    },
    statusType(row, column, cellValue, index){//用户状态
      switch(Number(cellValue)){
        case 10:
          return "开启"
        case 20:
          return "关闭"
        default:
          return cellValue
      }
    },
  }
}
</script>

